<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .demo {
        font-family: sans-serif;
        border: 1px solid #eee;
        border-radius: 2px;
        padding: 20px 30px;
        margin-top: 1em;
        margin-bottom: 40px;
        user-select: none;
        overflow-x: auto;
        }

        .full-page {
            height: 100vh
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div id="app" class="demo full-page">
        <h2>Scroll down the page</h2>
        <p v-pin:[direction]=distance>
            Stick me {{ distance }}px from the {{ direction }} of the page</p>
    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    /** 动态指令参数 */
    //实现边距以及规定元素位置（靠顶部、底部、左侧以及右侧）的动态指令参数
    const app = Vue.createApp({
        data() {
            return {
                distance: 100,  //边距
                direction: 'right', //规定元素的右侧边缘
            }
        }
    })

    //自定义命令，实现distance的动态传参
   // app.directive('pin', {
     //   mounted(el, binding) {
       //     console.log('binding --> ', binding)
         //   el.style.position = 'fixed';    //使该元素固定在屏幕中，不随页面滚动而发生变化
           // const s = 'top'
        //    el.style[s] = binding.value + 'px'
       // },
      //  updated(el,binding) {
       //         el.style.position = 'fixed'; //使该元素固定在屏幕中，不随页面翻滚而发生变化
       //         const s = bing.arg || 'right'
       ///         el.style[s] = binding.value + 'px'
       //     
      //  },
   //})

    //当mounted、updated钩子函数触发的行为一致时，可以简写为这种使用箭头函数的语法
    app.directive('pin',(el,binding) =>{//绑定属性
        el.style.position = 'fixed';
        const s = binding.arg || 'right'
        
    })
    const vm = app.mount("#app");
</script>
</html>